<template>
  <Page title="查看详情">
    <template #navBarCustom>
      <div class="flex items-center navBox">
        <div class="back" @click="back">
          <img class="icon" src="static/icons/back.png" mode="" />
          <span style="color: #fff">查看详情</span>
        </div>
      </div>
    </template>
    <template #content>
      <div class="w-full h-full">
        <div
          class="container w-full h-full p-20px box-border overflow-hidden bg-white flex flex-col"
        >
          <div class="w-full h-full overflow-scroll">
            <!-- 概况 -->
            <div class="overview text-center">
              <HalfRound
                :size="340"
                :ratio="ratio"
                :lineWidth="24"
                :val="getProcess(score, totalScore)"
              >
                <template #hbhCustom>
                  <div
                    style="width: 3rem; height: 1.7rem; font-size: 0.3rem; line-height: 0.3rem"
                    class="customBox"
                  >
                    <div class="text-333 font-normal flex justify-center items-center">
                      <span>总得分：</span>
                    </div>
                    <div class="text-333 font-normal flex justify-center items-end">
                      <span
                        class="font-semibold"
                        :class="`text-${getScoreClass(score / totalScore)}`"
                        style="font-size: 0.5rem; line-height: 0.5rem"
                        >{{ score }}</span
                      >
                      <span :class="`text-${getScoreClass(score / totalScore)}`">分</span>
                      <span>/{{ totalScore }}分</span>
                    </div>
                    <div
                      class="flex justify-center items-center mt-6px"
                      style="font-size: 0.24rem; line-height: 0.24rem"
                    >
                      <span class="mr-6px text-A3A3A3">{{ difficulty.text }}</span>
                      <el-rate :value="difficulty.average" disabled></el-rate>
                    </div>
                  </div>
                </template>
              </HalfRound>
            </div>
            <!-- 各模块得分情况 -->
            <div class="modules">
              <div
                class="item text-333 font-normal flex justify-between mt-30px"
                @click="$router.push('/pages/homework/detail/question/english/choose/index')"
                v-show="chooseTotalScore > 0"
              >
                <div class="title">
                  <span>听后选择</span>
                </div>
                <div class="detail">
                  <span :class="`text-${getScoreClass(chooseScore / chooseTotalScore)}`"
                    >{{ chooseScore }}分</span
                  >
                  <span>/{{ chooseTotalScore }}分</span>
                  <img class="icon ml-6px" src="static/icons/arrow-right.png" alt="" srcset="" />
                </div>
              </div>
              <div
                class="item text-333 font-normal flex justify-between mt-30px"
                @click="$router.push('/pages/homework/detail/question/english/dialogue/index')"
                v-show="dialogueTotalScore > 0"
              >
                <div class="title">
                  <span>听后回答</span>
                </div>
                <div class="detail">
                  <span :class="`text-${getScoreClass(dialogueScore / dialogueTotalScore)}`"
                    >{{ dialogueScore }}分</span
                  >
                  <span>/{{ dialogueTotalScore }}分</span>
                  <img class="icon ml-6px" src="static/icons/arrow-right.png" alt="" srcset="" />
                </div>
              </div>
              <div
                class="item text-333 font-normal flex justify-between mt-30px"
                @click="$router.push('/pages/homework/detail/question/english/read/index')"
                v-show="readTotalScore > 0"
              >
                <div class="title">
                  <span>短文朗读</span>
                </div>
                <div class="detail">
                  <span :class="`text-${getScoreClass(readScore / readTotalScore)}`"
                    >{{ readScore }}分</span
                  >
                  <span>/{{ readTotalScore }}分</span>
                  <img class="icon ml-6px" src="static/icons/arrow-right.png" alt="" srcset="" />
                </div>
              </div>
              <div
                class="item text-333 font-normal flex justify-between mt-30px"
                @click="$router.push('/pages/homework/detail/question/english/fill/index')"
                v-show="fillTotalScore > 0"
              >
                <div class="title">
                  <span>听后记录</span>
                </div>
                <div class="detail">
                  <span :class="`text-${getScoreClass(fillScore / fillTotalScore)}`"
                    >{{ fillScore }}分</span
                  >
                  <span>/{{ fillTotalScore }}分</span>
                  <img class="icon ml-6px" src="static/icons/arrow-right.png" alt="" srcset="" />
                </div>
              </div>
              <div
                class="item text-333 font-normal flex justify-between mt-30px"
                @click="$router.push('/pages/homework/detail/question/english/picture/index')"
                v-show="pictureTotalScore > 0"
              >
                <div class="title">
                  <span>听后转述</span>
                </div>
                <div class="detail">
                  <span :class="`text-${getScoreClass(pictureScore / pictureTotalScore)}`"
                    >{{ pictureScore }}分</span
                  >
                  <span>/{{ pictureTotalScore }}分</span>
                  <img class="icon ml-6px" src="static/icons/arrow-right.png" alt="" srcset="" />
                </div>
              </div>
              <div
                class="item text-333 font-normal flex justify-between mt-30px"
                @click="$router.push('/pages/homework/detail/question/english/fill-picture/index')"
                v-show="fillPictureTotalScore > 0"
              >
                <div class="title">
                  <span>听后记录并转述</span>
                </div>
                <div class="detail">
                  <span :class="`text-${getScoreClass(fillPictureScore / fillPictureTotalScore)}`"
                    >{{ fillPictureScore }}分</span
                  >
                  <span>/{{ fillPictureTotalScore }}分</span>
                  <img class="icon ml-6px" src="static/icons/arrow-right.png" alt="" srcset="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page/newPage'
import { getExamStudentQuestions } from '@/api/homework'
import { mapState } from 'vuex'
import HalfRound from './halfRound/index.vue'
export default {
  components: {
    Page,
    HalfRound
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === 'homework_todo_question_english') {
        vm.$route.params.completed = true
        next()
      }
    })
  },
  data() {
    return {
      ratio: 1,
      questions: [],
      difficulty: {
        average: 1,
        text: ''
      }
    }
  },
  computed: {
    ...mapState(['homework']),
    // 听后选择
    chooseQuestions() {
      return this.questions
        .map((q) => {
          if (q.stem.structure_type === 'collector.choose') {
            return q
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    chooseScore() {
      let score = 0
      this.chooseQuestions.forEach((q) => {
        const { questionIds, remoteStudentAnswer } = q

        questionIds.forEach((id, index) => {
          const remoteStudentAnswerItem = remoteStudentAnswer[index]

          if (remoteStudentAnswerItem) {
            const { studentScore } = remoteStudentAnswerItem
            score += studentScore
          }
        })
      })

      return score
    },
    chooseTotalScore() {
      let totalScore = 0
      this.chooseQuestions.forEach((q) => {
        const { questionIds, remoteStudentAnswer } = q

        questionIds.forEach((id, index) => {
          const remoteStudentAnswerItem = remoteStudentAnswer[index]

          if (remoteStudentAnswerItem) {
            const { questionScore } = remoteStudentAnswerItem
            totalScore += questionScore
          }
        })
      })

      return totalScore
    },
    // 听后回答
    dialogueQuestions() {
      return this.questions
        .map((q) => {
          if (q.stem.structure_type === 'collector.dialogue') {
            return q
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    dialogueScore() {
      let score = 0
      this.dialogueQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { studentScore }
        } = q
        score += studentScore
      })

      return score
    },
    dialogueTotalScore() {
      let totalScore = 0
      this.dialogueQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { questionScore }
        } = q
        totalScore += questionScore
      })

      return totalScore
    },
    // 短文朗读
    readQuestions() {
      return this.questions
        .map((q) => {
          if (q.stem.structure_type === 'collector.read') {
            return q
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    readScore() {
      let score = 0
      this.readQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { studentScore }
        } = q
        score += studentScore
      })

      return score
    },
    readTotalScore() {
      let totalScore = 0
      this.readQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { questionScore }
        } = q
        totalScore += questionScore
      })

      return totalScore
    },
    // 听后记录
    fillQuestions() {
      return this.questions
        .map((q) => {
          if (q.stem.structure_type === 'collector.fill') {
            return q
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    fillScore() {
      let score = 0
      this.fillQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { studentScore }
        } = q
        score += studentScore
      })

      return score
    },
    fillTotalScore() {
      let totalScore = 0
      this.fillQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { questionScore }
        } = q
        totalScore += questionScore
      })

      return totalScore
    },
    // 听后转述
    pictureQuestions() {
      return this.questions
        .map((q) => {
          if (q.stem.structure_type === 'collector.picture') {
            return q
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    pictureScore() {
      let score = 0
      this.pictureQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { studentScore }
        } = q
        score += studentScore
      })

      return score
    },
    pictureTotalScore() {
      let totalScore = 0
      this.pictureQuestions.forEach((q) => {
        const {
          remoteStudentAnswer: { questionScore }
        } = q
        totalScore += questionScore
      })

      return totalScore
    },
    // 听后记录并转述
    fillPictureQuestions() {
      return this.questions
        .map((q) => {
          if (q.stem.structure_type === 'collector.fill_picture') {
            return q
          } else {
            return null
          }
        })
        .filter((q) => !!q)
    },
    fillPictureScore() {
      let score = 0
      this.fillPictureQuestions.forEach((q) => {
        const { questionIds, remoteStudentAnswer } = q

        questionIds.forEach((id, index) => {
          const remoteStudentAnswerItem = remoteStudentAnswer[index]

          if (remoteStudentAnswerItem) {
            const { studentScore } = remoteStudentAnswerItem
            score += studentScore
          }
        })
      })

      return score
    },
    fillPictureTotalScore() {
      let totalScore = 0
      this.fillPictureQuestions.forEach((q) => {
        const { questionIds, remoteStudentAnswer } = q

        questionIds.forEach((id, index) => {
          const remoteStudentAnswerItem = remoteStudentAnswer[index]

          if (remoteStudentAnswerItem) {
            const { questionScore } = remoteStudentAnswerItem
            totalScore += questionScore
          }
        })
      })

      return totalScore
    },
    // 所有题型分数统计
    score() {
      const score =
        this.chooseScore +
        this.dialogueScore +
        this.readScore +
        this.fillScore +
        this.pictureScore +
        this.fillPictureScore

      try {
        return parseFloat(score).toFixed(1)
      } catch (error) {
        return 0
      }
    },
    totalScore() {
      const totalScore =
        this.chooseTotalScore +
        this.dialogueTotalScore +
        this.readTotalScore +
        this.fillTotalScore +
        this.pictureTotalScore +
        this.fillPictureTotalScore

      return totalScore
    }
  },
  created() {
    this.init()
  },
  mounted() {
    window.addEventListener('resize', (event) => {
      this.ratio = document.body.clientWidth / 1280
      // 在这里可以添加你想要执行的代码，比如更新页面布局或者调整媒体查询
    })
    this.ratio = document.body.clientWidth / 1280
  },
  methods: {
    back() {
      this.$router.back()
    },
    getProcess(val1, val2) {
      if (val2 - 0 <= 0) {
        return 0
      }
      return (val1 - 0) / (val2 - 0)
    },
    async init() {
      const {
        record: { id },
        questions
      } = this.homework.currentHomework

      const { data } = await getExamStudentQuestions({
        examId: id
      })

      let totalDifficulty = 0
      if (Array.isArray(questions)) {
        this.questions = questions.map((i) => {
          const {
            stem: { structure_type },
            difficulty
          } = i

          totalDifficulty += difficulty
          if (
            structure_type === 'collector.choose' ||
            structure_type === 'collector.fill_picture'
          ) {
            // 听后选择
            const { questionIds } = i
            const remoteStudentAnswer = {}
            questionIds.forEach((id, index) => {
              const remoteStudentAnswerItem = data.find((item) => item.questionId === id)

              const { studentScore, studentAnswer } = remoteStudentAnswerItem
              if (studentAnswer) {
                remoteStudentAnswerItem.studentAnswer = JSON.parse(studentAnswer)
              }
              remoteStudentAnswer[index] = remoteStudentAnswerItem

              i['remoteStudentAnswer'] = remoteStudentAnswer
              if (i.remoteStudentAnswerStatus === undefined || i.remoteStudentAnswerStatus === 1) {
                // -1 => 待批改 0 => 做错了 1 => 做对了
                i['remoteStudentAnswerStatus'] = !!studentScore
                  ? 1
                  : parseInt(studentScore) === 0
                  ? 0
                  : -1
              }
            })
          } else {
            const remoteStudentAnswerItem = data.find((item) => item.questionId === i.questionId)

            const { studentScore, studentAnswer } = remoteStudentAnswerItem
            studentAnswer ? (remoteStudentAnswerItem.studentAnswer = JSON.parse(studentAnswer)) : {}

            i['remoteStudentAnswer'] = remoteStudentAnswerItem
            // -1 => 待批改 0 => 做错了 1 => 做对了
            i['remoteStudentAnswerStatus'] = !!studentScore
              ? 1
              : parseInt(studentScore) === 0
              ? 0
              : -1
          }

          return i
        })
      }

      try {
        const average = totalDifficulty / questions.length
        if (average <= 0.3) {
          this.difficulty.average = 5
          this.difficulty.text = '困难'
        } else if (average > 0.3 && average <= 0.5) {
          this.difficulty.average = 4
          this.difficulty.text = '较难'
        } else if (average > 0.5 && average <= 0.8) {
          this.difficulty.average = 3
          this.difficulty.text = '适中'
        } else if (average > 0.8 && average <= 0.9) {
          this.difficulty.average = 2
          this.difficulty.text = '较易'
        } else {
          this.difficulty.average = 1
          this.difficulty.text = '容易'
        }
      } catch (error) {}
    },
    getScoreClass(proportion) {
      if (typeof proportion != 'number') return

      if (proportion >= 0 && proportion < 0.4) {
        return 'FF4040'
      } else if (proportion >= 0.4 && proportion < 0.8) {
        return 'F8AC23'
      } else {
        return '30C9A1'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.customBox {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.navBox {
  padding: 0 20px;
  box-sizing: border-box;
}
.back {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 28px;

  .icon {
    width: 17.14px;
    height: 30px;
    margin-right: 11px;
  }
}
.container {
  .overview {
    font-size: 20px;
  }

  .modules {
    font-size: 26px;
    padding: 0 390px;

    .item {
      .title {
      }

      .detail {
        .icon {
          width: 9.14px;
          height: 16px;
        }
      }
    }
  }
}

/deep/ .el-rate {
  height: auto;
}
</style>
